<template>
 <div>
   <el-row>
     <el-col :span="24">
        <div class="header">
         <label for="assistant" style="font-size:20px;font-weight: 600; line-height: 40px;margin-right:5px">未审核辅导员信息</label>
       </div>
        <div style="width:90px;float: right;margin-left:10px;">
         <el-button type="primary" icon="el-icon-download" @click="exportExcel" plain>预览</el-button>
       </div>
       <div style="width:90px;float: right;margin-left:10px;">
         <el-button v-if="userInfo.username != 'jiaoyuting'" type="warning" icon="el-icon-circle-plus-outline" @click="addAssist">添加</el-button>
       </div>
       <div style="width:90px;float:left;margin-left:10px;">
         <el-button type="success" icon="el-icon-check" @click="checkPass(multipleSelection)" round>审核通过</el-button>
       </div>       
       <div style="width:90px;float:left;margin-left:40px;">
         <el-button type="danger" icon="el-icon-close" @click="checkNoPass(multipleSelection)" round>审核不通过</el-button>
       </div>   
       <el-col :span="3"> 
         <div style="width:150px;margin-left:40%;">
          <el-select v-if="userInfo.username ==='jiaoyuting'|| userInfo.username ==='admin'" v-model="form.sch_name" placeholder="选择或输入学校" filterable  clearable>
            <el-option
              v-for="item in schools"
              :key="item.value"
              :label="item.sch_name"
              :value="item.sch_name">
            </el-option>
          </el-select> 
        </div>  
       </el-col>
      <el-col :span="3"> 
         <div class="header" style="width:130px;margin-left:41%;">
          <el-select v-if="this.userInfo.level === 3 || this.userInfo.level === 9" v-model="form.sch_address" placeholder="学校所在地" clearable filterable>
            <el-option
              v-for="item in schAddress"
              :key="item.value"
              :label="item.sch_address"
              :value="item.sch_address">
              </el-option>
          </el-select>
        </div>
       </el-col>
       <el-col :span="3"> 
         <div class="header" style="width:120px;margin-left:42%;">
          <el-input v-model="form.name" auto-complete="off" placeholder="输入姓名" filterable></el-input>
         </div>
       </el-col>
       <el-col :span="3"> 
         <div class="header" style="width:120px;margin-left:43%;">
          <el-select v-model="form.sex" clearable placeholder="选择性别" style="width: 100%;">
            <el-option
              v-for="item in option1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>     
        </div>
       </el-col>
       <el-col :span="2"> 
         <div class="header" style="width:30px;margin-left:44%;">
          <el-button type="primary" icon="el-icon-search" @click="getTableData();getSearchData()">搜索</el-button>
        </div>
       </el-col> 
     <!--   <div class="header" style="width:120px;float: right;">
         <el-button type="primary" icon="el-icon-search" @click="dialogFormVisible = true">高级搜索</el-button>
         <el-dialog title="高级搜索" :visible.sync="dialogFormVisible" width="19%">
            <el-form :model="form">
              <el-form-item >
                <div style=" border-width:1px 0px;padding: 10px 0px 5px 0px;">
                  <el-input v-model="form.sch_name" auto-complete="off" placeholder="请输入学校名称" v-if="userInfo.username==='jiaoyuting'"></el-input>
                </div>
                <div style="border-width:1px 0px;padding: 10px 0px 5px 0px;">
                  <el-select v-model="form.sex" clearable placeholder="选择性别" style="width: 100%">
                  <el-option
                    v-for="item in option1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>          
                </div >
                <div style=" border-width:1px 0px;padding: 10px 0px 5px 0px;">
                <el-input v-model="form.name" auto-complete="off" placeholder="请输入姓名"></el-input>
                </div>
                <div style=" border-width:1px 0px;padding: 10px 0px 5px 0px;">
                <el-input v-model="form.idcard" auto-complete="off" placeholder="请输入身份证号"></el-input>
                </div>
              </el-form-item>
            </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible=false;getTableData();getSearchData()" :loading="isLoading" >确 定</el-button>
        </div>
        </el-dialog>
       </div> -->
     </el-col>
   </el-row>
   <el-row style="border-top: 1px solid black; margin-top: 15px">
     <el-table
      @selection-change="handleSelectionChange"
      :data="tableData"
      v-loading="loading"
      style="width: 100%;margin-bottom: 10px;"
      :row-style="showSex"
      >
       <el-table-column
        type="selection"
        width="55">
        </el-table-column>
        <el-table-column
        prop="id"
        label="id"
        width="90">
      </el-table-column>
      <el-table-column
        label="姓名"
        prop="name"
        width="160">
      </el-table-column>
      <el-table-column
        label="性别"
        prop="sex"
        width="130">
      </el-table-column>
      <el-table-column
        label="工作单位"
        prop="sch"
        width="190">
      </el-table-column>
      <el-table-column
        label="高校所在地"
        prop="address"
        width="150">
      </el-table-column>
      <el-table-column
        label="行政职务"
        prop="preoccupation"
        width="140">
      </el-table-column>
      <el-table-column
        label="出生年月"
        prop="birth"
        width="170">
      </el-table-column>
      <el-table-column
        label="最高学历"
        prop="edu"
        width="170">
      </el-table-column>
      <el-table-column
        label="政治面貌"
        prop="politics"
        width="150">
      </el-table-column>
      <el-table-column label="状态" prop="submit" width="140">
        <template scope="scope" >
          <el-tag type="warning" v-if="scope.row.submit === 1" close-transition>未提交</el-tag>
          <el-tag type="success" v-if="scope.row.submit === 2" close-transition width="80">已提交</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="130">
        <template slot-scope="scope">
          <!-- name的值是配置路由文件对某界面的命名name，接受值this.$router.params.id -->
          <router-link :to="{name: 'personmsg',
                            params: {id: scope.row.id,
                                     last: '1',
                                     searchData: searchData
                                    }
                            }" 
                            class="btn-link edit-btn el-icon-edit">
          查看详情
          </router-link>
        </template>
      </el-table-column>
     </el-table>
   </el-row>
   <el-pagination
    v-show="allPage>1"
    layout="prev, pager, next"
    :page-count="allPage"
    :current-page="nowPage"
    @current-change="goPage" 
    class="pull-right" background>
  </el-pagination>
 </div>
</template>

<script>
import http from '../../../../src/assets/js/http'
export default {
  data () {
    return {
      allPage: 1,
      nowPage: 1,
      tableData: [],
      option1: [{
        value: '1',
        label: '男'
      },{
        value: '2',
        label: '女'
      }],
      form: {
        sch_address: '',
        sch_name: '',
        name: '',
        sex: ''
      },
      schAddress: [],
      dialogFormVisible: false,
      multipleSelection: [],
      selectId: [],
      userInfo: Lockr.get('userInfo'),
      loading: true,
      schools: Lockr.get('schInfo'),
      searchData: {}
    }
  },
  methods: {
    init() {
      this.getTableData()
    },
    // 保存搜索数据
    getSearchData() {
      this.searchData = {
        // sch: this.userInfo.sch,
        sex: this.form.sex,
        name: this.form.name,
        sch_address: this.form.sch_address,
        sch_name: this.form.sch_name,
      }
    },
    
    //获取条件查询的所在学校地
    getSchaddress() {
      this.apiPost('admin/Train/TeacherYear').then((res) =>{
          this.handelResponse(res,(data)=>{
            console.log(res.data)
            this.schAddress = data.sch_address
          })
      })
    },
    //获取数据填充表格
    getTableData() {
      if(this.$route.params.searchData === undefined) {
        var data = {
          page:this.nowPage,
          // sch:this.schools['sch_id_'+element.sch],
          sch: this.userInfo.sch,
          sex: this.form.sex,
          name: this.form.name,
          idnumber: this.form.idcard,
          sch_name: this.form.sch_name,
          level_1: this.userInfo.level_1
        }
      } else {
        var data = {
          page:this.nowPage,
          sch: this.userInfo.sch,
          sex: this.$route.params.searchData.sex,
          name: this.$route.params.searchData.name,
          idnumber: this.$route.params.searchData.idnumber,
          sch_name: this.$route.params.searchData.sch_name,
          level_1: this.userInfo.level_1   //未定
        }
        this.form = this.$route.params.searchData
      }
      console.log(this.form);
      this.apiPost('admin/Train/TeacherQuery', data).then((res) => {
        console.log(data)
        this.handelResponse(res, (data) => {
          console.log(data.data)
          this.tableData = []
          data.data.forEach((element) => {
            if(element.sex === 1) {
              element.sex = "男"
            } else if (element.sex === 2) {
              element.sex = "女"
            }
            this.tableData.push({
              id: element.id,
              name: element.name,
              sex: element.sex,
              sch: this.schools['sch_id_'+element.sch].sch_name,
              preoccupation: element.preoccupation,
              address: element.address,
              birth: element.birth,
              edu: element.edu,
              politics: element.politics,
              submit: element.submit
            })
            
          })
          this.allPage = data.last_page
          // _g.closeGlobalLoading()
          this.loading = false
        })
      })
    },
    // 复选框信息
    handleSelectionChange(val) {
      this.multipleSelection = val
    }, 
    // 审核通过
    checkPass(row) {
      // console.log(row);
      if(row.length >= 1) {
        this.$confirm('确认选中辅导员审核通过吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _g.openGlobalLoading()
        let ids = []
        for(let i = row.length-1; i >= 0; i --) {
          ids[i] = row[i].id
        }
        let data = {
          id: ids,
          status: 2
        }
        console.log(data)
        if(this.userInfo.level === 2) {
          this.apiPost('admin/Train/TeacherCheck', data).then((res) => {
            _g.closeGlobalLoading()
            this.handelResponse(res, (data) => {
              _g.toastMsg('success', '审核成功')
              if (row.length === 1 && this.nowPage !== 1) {
                this.nowPage = this.nowPage - 1
                this.goPage(this.nowPage)
              } else {
                this.goPage(this.nowPage)
              }
            })
          })
        } else {
          this.apiPost('admin/Train/EduCheck', data).then((res) => {
            _g.closeGlobalLoading()
            this.handelResponse(res, (data) => {
              _g.toastMsg('success', '审核成功')
              if (row.length === 1 && this.nowPage !== 1) {
                this.nowPage = this.nowPage - 1
                this.goPage(this.nowPage)
              } else {
                this.goPage(this.nowPage)
              }
            })
          })
        }   
      }).catch(() => {
        // handle error
        })
      } else {
          _g.toastMsg('warning', '请至少选择一项！')
      }
    },
     // 审核不通过
    checkNoPass(row) {
      console.log(row)
      if(row.length >= 1) {
        this.$confirm('确认选中辅导员审核不通过吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _g.openGlobalLoading()
        let ids = []
        for(let i = row.length-1; i >= 0; i --) {
          ids[i] = row[i].id
        }
        let data = {
          id: ids,
          status: 3
        }
        console.log(data)
        if(this.userInfo.level === 2) {
          this.apiPost('admin/Train/TeacherCheck', data).then((res) => {
            _g.closeGlobalLoading()
            this.handelResponse(res, (data) => {
              _g.toastMsg('success', '审核不通过')
              if (row.length === 1 && this.nowPage !== 1) {
                this.nowPage = this.nowPage - 1
                this.goPage(this.nowPage)
              } else {
                this.goPage(this.nowPage)
              }
            })
          })
        } else {
          this.apiPost('admin/Train/TeacherCheck', data).then((res) => {
            _g.closeGlobalLoading()
            this.handelResponse(res, (data) => {
              _g.toastMsg('success', '审核不通过')
              if (row.length === 1 && this.nowPage !== 1) {
                this.nowPage = this.nowPage - 1
                this.goPage(this.nowPage)
              } else {
                this.goPage(this.nowPage)
              }
            })
          })
        }
        
      }).catch(() => {
        // handle error
        })
      } else {
          _g.toastMsg('warning', '请至少选择一项！')
      }
    },
    // 添加行样式
    showSex() {
      // return { 'background-color': '#f0f9eb'}
    },
    // 根据页面渲染数据
    goPage(num) {
      this.nowPage = num
      this.getTableData()
    },
    // 导出表格
    exportExcel() {
      var that = this 
      require.ensure([], () => {
        const { export_json_to_excel } = require('../../../vendor/export2Excel') 
        const tHeader = [ '编号', '姓名', '性别', '工作单位', '高校所在地', '行政职务', '出生年月', '最高学历', '政治面貌']
        const filterVal = ['id','name', 'sex', 'sch', 'address', 'preoccupation', 'birth', 'edu', 'politics']; // 导出的表头字段名，需要导出表格字段名
        const list = that.tableData;
        const data = that.formatJson(filterVal, list);

        export_json_to_excel(tHeader, data, '未审核辅导员表');// 导出的表格名称，根据需要自己命名
      })
    },
    formatJson(filterVal, jsonData) {
        console.log(jsonData)
        return jsonData.map(v => filterVal.map(j => v[j]))
    },
    // 添加辅导员信息
    addAssist() {
      console.log(2)
      // this.$router.go(-1)
      this.$router.push({
        name: 'impList'
      })
    }  
  },
  created() {
    _g.closeGlobalLoading()
    this.init()
    this.getSchaddress()
  },
  mounted() {
    // window.addEventListener('keyup', (e) => {
    //   if(e.keyCode === 13) {
    //     this.getTableData()
    //     this.dialogFormVisible=false
    //   }
    // })
  },
  computed: {
  },
  components: {
  },
  mixins: [http]
}

</script>
<style scoped>
  .header {
     float: left;
     margin-left: 10px;
  }
  .button {
    margin-left: 15px;
    margin-top: -5px;
  }
  .searchInfo {
    background-color: #2980D9;
  }
  .el-table th, .el-table tr {
    height: 57px
  }
</style>
